Skip to main content

Widget

WUI provides a large number of basic widgets. Based on these widgets, allows users to write UI quickly.

  1. Combining composition and inheritance, the widgets is highly scalable and flexible.
  2. Provides common UI templates, such as tree widget, dock widget, and ribbon widget.
  3. Supports custom events.
  4. A number of different styles are available, and the style can be customized.
  5. Supports font icon.

Here we'll introduce the class Widget, which is the parent class of all other basic widgets.

Detailed Description​

Widget , which inherits from EventWatcher, is the base class of all other widgets. Widgets are the atoms of the user interface: they receives mouse, keyboard and other events from the window system. The class Widget has many subclasses which provide real functionality, such as Button, Slider, ListWidget.

When a widget is used as a container to group a number of child widgets, it is known as a composite widget. The widget is offline if it's parent or ancestor is undefined.

The widget is also the encapsulation of the dom(By default, it is a div tag), and provides elegant api interfaces.

Event​

The widget has show and hide events, the events are emitted when the user modifies the visible property. User can typically write event handlers to respond to these events.

// Listen for the show event
widget.bind('showed', () => void {
    // Widget is now visible
});
// Listen for the hide event
widget.bind('hidden', () => void {
    // Widget is now hidden
});

Example code​

In the code below, you will create a widget:

const desktop = Desktop.instance(); // Root widget, there can only be one instance in an application.
const widget = new Widget(desktop);
widget.size = new Size(200, 200);
widget.enabled = false; // If a widget is disabled, it is changed to a "disabled" appearance.

If you wants to embed a video in web pages:

const desktop = Desktop.instance();
const widget = new Widget(desktop, 'video');
const element = widget.dom as HTMLVideoElement;
element.src = 'video.mp4';
element.play();

Releases the resources in the protected function free(), and the system will call this function automatically when the parent widget or itself is destroyed.
For example:

class TimerWidget extends Widget {
    private m_timer: Timer;

    constructor(parent?: Widget) {
        super(parent);

        this.m_timer = new Timer();
        this.m_timer.bind('timeout', (): void => { });
        this.m_timer.start(1000);
    }

    protected free(): void {
        this.m_timer.stop();

        super.free();
    }
}

const widget = new TimerWidget();
widget.destroy();